<template>
	<view class="codefun-flex-col page space-y-17">
		<swiper class="codefun-flex-col codefun-justify-start codefun-items-center image-wrapper" :indicator-dots="true"
			:autoplay="true">
			<swiper-item v-for="(item, index) in pic" :key="index">
				<image class="image" :src="item.pictureurl" mode="aspectFit" />
			</swiper-item>
			<swiper-item>
				<image class="image"
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/64979aaa5a7e3f03109285bc/649cf90f726ab50011f4229a/16881801804491765360.png"
					mode="aspectFit" />
			</swiper-item>
		</swiper>
		<text class="codefun-self-start text">{{ note.notetitle }}</text>
		<view class="codefun-flex-col space-y-16">
			<view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper">
				<text class="text_2">{{ layer[0].content }}</text>
			</view>
			<view class="codefun-flex-row codefun-items-center section">
				<view class="codefun-flex-row codefun-items-center space-x-8" @click="toggleLike">
					<image :src="love" style="width: 50rpx; height: 50rpx;"></image>
					<text class="num">{{likeCount}}</text>
				</view>
				<view class="codefun-flex-row codefun-items-center group space-x-8" @click="toggleStore">
					<image :src="store" style="width: 50rpx; height: 50rpx;"></image>
					<text class="num">{{storeCount}}</text>
				</view>
				<view class="codefun-flex-row codefun-items-center group_2 space-x-15" @click="toComment">
					<image class="image_3"
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/64979aaa5a7e3f03109285bc/649cf90f726ab50011f4229a/16880920543683798359.png" />
					<text class="num">{{commentCount}} </text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				pic: [],
				note: {},
				layer: [{}, {}, {}, {}, {}],
				noteID: '',
				noteContent: '这是一篇笔记的内容',
				storeCount: 20,
				likeCount: 10,
				commentCount: 10,
				love: '../../static/love.png',
				store: '../../static/store.png',
			};
		},
		
		onLoad(e) {
			this.noteID=e.noteID;
			//this.noteID=e;
			console.log(777)
			let that = this
			uni.request({
				url: '/note/getPictureByNoteId/' + that.noteID,
				method: 'GET',

				success: (res) => {
					console.log(res)
					that.pic = res.data
					console.log(that.pic + 222)
				}
			})
			uni.request({
				url: '/community/getCommunityNote/' + that.noteID,
				method: 'GET',

				success: (res) => {
					console.log(res)
					that.note = res.data
				}
			})
			uni.request({
				url: '/note/getLayercontentByNoteId/' + that.noteID,
				method: 'GET',

				success: (res) => {
					console.log(res)
					that.layer = res.data
				}
			})
			uni.request({
				url: '/favor/favorNum/' + that.noteID,
				method: 'GET',

				success: (res) => {
					console.log(res)
					that.likeCount = res.data
				}
			})
			uni.request({
				url: '/star/starList/starNum/' + that.noteID,
				method: 'GET',

				success: (res) => {
					console.log(res)
					that.storeCount = res.data
				}
			})
			uni.request({
				url: '/remark/getRemarkNum/' + that.noteID,
				method: 'GET',

				success: (res) => {
					console.log(res)
					that.commentCount = res.data
				}
			})
		},

		methods: {
			toggleLike() {
				if (this.love == "../../static/love.png") {
					this.love = "../../static/chooselove.png";
					this.likeCount++;
				} else {
					this.love = "../../static/love.png";
					this.likeCount--;
				}
			},
			toggleStore() {

				if (this.store == "../../static/store.png") {
					this.store = "../../static/choosestore.png";
					this.storeCount++;
				} else {
					this.store = "../../static/store.png";
					this.storeCount--;
				}
			},
			toComment() {
				uni.navigateTo({
					url: "../../pages/commentpage/commentpage?subnoteid=" + this.noteID
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.page {
		background-image: linear-gradient(172.8deg, #7de2fc66 -0.9%, #b9b6e5d1 88.1%);
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.image-wrapper {
			background-color: white;
			height: 812.79rpx;

			.image {
				display: block;
				margin: 0 auto;
				width: 540.7rpx;
				height: 812.79rpx;
			}
		}

		.text {
			margin-left: 41.86rpx;
			color: #4659b8;
			font-size: 41.86rpx;
			font-family: AlimamaShuHeiTi;
			line-height: 37.5rpx;
		}

		.space-y-16 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 27.91rpx;
			}

			.text-wrapper {
				margin: 0 17.44rpx;
				padding: 27.91rpx 0 484.88rpx;
				background-color: #f3f2ff;
				border-radius: 10.47rpx;
				border: solid 5.23rpx #4659b8;

				.text_2 {

					margin-left: 27.91rpx;
					color: #7f79b8;
					font-size: 35rpx;
					font-family: AlimamaShuHeiTi;
					line-height: 50rpx;
				}
			}

			.section {
				padding: 34.88rpx 38.37rpx 31.4rpx;
				background-color: #cfe7fff5;
				border: solid 1.74rpx #877ceb;

				.space-x-8 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 13.95rpx;
					}

					.image_2 {
						width: 70rpx;
						height: 70rpx;
					}
				}

				.group {
					margin-left: 83.72rpx;
					padding: 0 6.98rpx;

					.image_5 {
						margin: 3.49rpx 0 3.49rpx 13.95rpx;
					}
				}

				.image_4 {
					width: 71.51rpx;
					height: 52.33rpx;
				}

				.group_2 {
					margin-left: 97.67rpx;
				}

				.space-x-15 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 26.16rpx;
					}
				}

				.image_3 {
					width: 59.3rpx;
					height: 59.3rpx;
				}
			}
		}
	}

	.space-y-17 {

		&>view:not(:first-child),
		&>text:not(:first-child),
		&>image:not(:first-child) {
			margin-top: 29.65rpx;
		}

		.num {
			color: #4659b8;
			font-size: 41.86rpx;
			font-weight: bold;
		}
	}
</style>